<div class="d-flex align-items-center justify-content-between user-select-none">
  <nav>
    <ul class="pagination mb-0">
      <li class="page-item">
        <span
          tabindex="0"
          (click)="onClickBack()"
          (keyup)="onClickBackKeyup($event)"
          class="page-link border-0 cursor-pointer"
        >
          <i class="bi bi-arrow-left"></i>
        </span>
      </li>
    </ul>
  </nav>

  <div class="d-flex gap-4">
    <a
      (click)="onClickPreviousPage(previousPageId)"
      [routerLink]="previousPageId ? '/posts/' + previousPageId : '/posts'"
      queryParamsHandling="merge"
      class="btn btn-secondary"
      [class.disabled]="!previousPageId || currentId === previousPageId"
    >
      <i class="bi bi-arrow-left"></i>
    </a>
    <a
      (click)="onClickNextPage(nextPageId)"
      [routerLink]="nextPageId ? '/posts/' + nextPageId : '/posts'"
      queryParamsHandling="merge"
      class="btn btn-secondary"
      [class.disabled]="!nextPageId || currentId === nextPageId"
    >
      <i class="bi bi-arrow-right"></i>
    </a>
  </div>
</div>
